<script setup>
import { ref, nextTick } from 'vue'

// 新建弹出层
const showNewPlay = ref(false)
// 新建歌单标题
const playTitle = ref('')
const showDialog = (initTitle) => {
  showNewPlay.value = true
  playTitle.value = initTitle
}

// 打开新建歌单后
const onOpenedNewDialog = () => {
  // 选中输入框的内容且聚焦
  nextTick(() => {
    const input = document.querySelector('.titleInput input')
    input.select()
    input.focus()
  })
}
const emit = defineEmits(['new-play', 'rename-play'])
// 新建歌单
const onNewPlay = () => {
  if (!playTitle.value) {
    showNotify({ type: 'danger', message: '歌单名不能为空' })
    return
  }
  // if(showType.value === 'rename') {

  // }
  emit('new-play', playTitle.value)
  emit('rename-play', playTitle.value)

  showNewPlay.value = false
}
// 导出
defineExpose({
  showDialog
})
</script>
<template>
  <!-- 新建歌单弹窗 -->
  <!-- @open="playTitle = `新建歌单${listInfo.length}`" -->
  <van-dialog
    v-model:show="showNewPlay"
    title="新建歌单"
    show-cancel-button
    @opened="onOpenedNewDialog()"
    @confirm="onNewPlay()"
  >
    <van-cell-group inset :border="true">
      <!-- lazy-render -->
      <van-field
        class="titleInput"
        v-model="playTitle"
        :clearable="true"
        clear-trigger="always"
        placeholder="请输入歌单名"
        maxlength="20"
        show-word-limit
      />
    </van-cell-group>
  </van-dialog>
</template>
<style scoped>
::v-deep .van-field__body {
  background-color: var(--van-field__control-background-color);
  border: var(--van-field__control-border);
  height: 27px;
}
</style>
